<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/timeline.css" />

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown active"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page-->
	<div id="banner">
		<div class="container intro_wrapper">
			<div class="inner_content">
				<h1>Timeline</h1>
					<h1 class="title">When Where What</h1>
						<h1 class="intro">
							Web design is the creation of <span class="hue">digital environments</span>, that <span>facilitate</span> and encourage human activity; 
							<span>reflect </span> or adapt to individual voices and content. - Jeffrey Zeldman
						</h1>
					</div>
				</div>
			</div>
			<div class="container wrapper">
				<div class="inner_content">
					<div class="pad45"></div>
					<div class="main fadeinup">
						
				<ul class="cbp_tmtimeline">
					<li>
						<time class="cbp_tmtime"><span>2009</span></time>
						<div class="cbp_tmicon cbp_tmicon-phone"></div>
						<div class="cbp_tmlabel">
							<h2>Mr. Fogg Returned On Board</h2>
							<p>
								Mr. Fogg and his servant went ashore at Aden to have the passport again visaed; Fix, unobserved, followed them. The visa procured, Mr. Fogg returned on 
								board to resume his former habits; while Passepartout, according to custom, sauntered about among the mixed population of Somalis, Banyans, Parsees, 
								Jews, Arabs, and Europeans who comprise the twenty-five thousand inhabitants of Aden. He gazed with wonder upon the fortifications which make this 
								place the Gibraltar of the Indian Ocean, and the vast cisterns where the English engineers were still at work, two thousand years after the engineers 
								of Solomon.
							</p>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime"><span>2010</span></time>
						<div class="cbp_tmicon cbp_tmicon-screen"></div>
						<div class="cbp_tmlabel">
							<h2>All Thirteen Of The Tricks</h2>
							<p>
								Phileas Fogg was in the act of finishing the thirty-third rubber of the voyage, and his partner and himself having, by a bold stroke, captured all thirteen 
								of the tricks, concluded this fine campaign with a brilliant victory.
							</p>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime"> <span>2011</span></time>
						<div class="cbp_tmicon cbp_tmicon-mail"></div>
						<div class="cbp_tmlabel">
							<h2>Since His Departure</h2>
							<p>
								The Mongolia was due at Bombay on the 22nd; she arrived on the 20th. This was a gain to Phileas Fogg of two days since his departure from London, and he 
								calmly entered the fact in the itinerary, in the column of gains.
							</p>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime"><span>2012</span></time>
						<div class="cbp_tmicon cbp_tmicon-phone"></div>
						<div class="cbp_tmlabel">
							<h2>The British Crown Exercises</h2>
							<p>
								Everybody knows that the great reversed triangle of land, with its base in the north and its apex in the south, which is called India, embraces fourteen 
								hundred thousand square miles, upon which is spread unequally a population of one hundred and eighty millions of souls.  The British Crown exercises a real 
								and despotic dominion over the larger portion of this vast country, and has a governor-general stationed at Calcutta, governors at Madras, Bombay, and in 
								Bengal, and a lieutenant-governor at Agra.
							</p>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime" > <span>2013</span></time>
						<div class="cbp_tmicon cbp_tmicon-earth"></div>
						<div class="cbp_tmlabel">
							<h2>The English First Gained A Foothold</h2>
							<p>
								But British India, properly so called, only embraces seven hundred thousand square miles, and a population of from one hundred to one hundred and ten millions 
								of inhabitants.  A considerable portion of India is still free from British authority; and there are certain ferocious rajahs in the interior who are 
								absolutely independent.  The celebrated East India Company was all-powerful from 1756, when the English first gained a foothold on the spot where now stands 
								the city of Madras, down to the time of the great Sepoy insurrection.
							</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		</div>
		<!--//page-->
			
	<!-- footer-->
		<div id="footer2">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
				<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
					</div>
					<!-- up to top -->
				<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
				<!--//end--> 
				
<!-- scripts -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/retina.js"></script>
</body>
</html>